*
{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

section{
  position:relative;
  width:100%;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items: center;
  background:#001300;
  flex-direction:column;
  animation: changeColor 5s linear infinite;
}
@keyframes changeColor{
  
  0%{
    filter: hue-rotate(0deg)
  }
   100%{
    filter: hue-rotate(360deg)
  }
  
}
section h2{
    color:#00ff0a;
    font-family: consolas;
    font-weight:300;
    letter-spacing: 10px;
}
section .loader{
  position:relative;
  display:flex;
}
section .loader .dot{
  position:relative;
  display:block;
  width: 20px;
  height: 20px;
  background:#00ff0a;
  box-shadow: 0 0 10px #00ff0a,
              0 0 20px #00ff0a,
              0 0 40px #00ff0a,
              0 0 60px #00ff0a,
              0 0 80px #00ff0a,
              0 0 100px #00ff0a;
  margin: 20px 10px;
  transform:scale(0.1);
  border-radius:50%;
  animation: animateDot 2s linear infinite;
  animation-delay:calc(0.1s * var(--i));
}
section .loader:last-child .dot{
    animation-delay:calc(-0.1s * var(--i));
}


@keyframes animateDot{

  0%{
    transform:scale(0.1);
  }
  
  10%{
    transform:scale(1);
  }
  50%,100%{
    transform:scale(0.1);
  }

}